<template>
  <div class="outer">
    <div class="nav">
      <my-nav-bar>
        <span slot="left" class="left-text" @click="onClickLeft">{{
          $store.state.cityName
        }}<i class="iconfont icon-arrow-bottom-line"></i></span>
        <span slot="title">影院</span>
        <span slot="right" @click="onClickRight"><i class="iconfont icon-search"></i></span>
      </my-nav-bar>
    </div>
    <van-list class="vanlist">
      <van-cell class="vancell" v-for="(data, index) in cinemasList" :key="index">
        <p class="name">
          {{ data.name }} <span>￥{{ data.lowPrice / 100 }}起</span>
        </p>
        <p class="address">{{ data.address }}</p>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import MyNavBar from "../components/details/NavBar";
import { List, Cell } from "vant";
import { mapState,mapActions} from 'vuex';
import Vue from "vue";
Vue.use(List).use(Cell);
export default {
  components: {
    MyNavBar,
  },
  methods: {
        ...mapActions("CinemaModule",['getCineamsList']),
    onClickLeft() {
      this.$router.push({ path: `/cinema/cityname` }); //编程式导航
    },
     onClickRight(){
     this.$router.push({path:'/search'});
  }
  },
  computed:{
    ...mapState("CinemaModule",['cinemasList'])
  },
  mounted() {
    if(this.cinemasList.length===0){
      this.getCineamsList(this.$store.state.cityId).then(()=>{
        console.log("数据获取成功之后的回调");
      });
    }else{
      console.log("缓存中的数据已经获取");
    }
  },
};
</script>
<style lang="less" scoped>
.outer {
  .nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    .left-text {
      font-size: 13px;
    }
  }
  .vanlist {
    padding: 10px;
    .vancell {
      .name {
        color: #191a1b;
        font-size: 15px;
        span {
          float: right;
          font-size: 15px;
          color: #ff5f16;
          margin-right: 10px;
        }
      }
      .address {
        max-width: 80%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #797d82;
        font-size: 12px;
        margin-top: 5px;
      }
    }
  }
}
</style>